
import { initMap, darkStyle } from "@/utils/common.js";
import { GETNOBASE } from "@/api";
// import { throttle, debounce } from "@/utils/index.js"
export const useMapStore = defineStore("myBmapGL", () => {
    const map = ref(null);
    const zoom = ref(10);
    // 大屏缩放比例
    const seenScale = ref();
    // const center = mapv.utilCityCenter.getCenterByCityName("天津");
    const setCenterAndZoom = (map, centerAndZoom) => {
        const { centerPoint, zoomValue } = centerAndZoom;
        zoom.value = zoomValue;
        map.centerAndZoom(centerPoint, zoomValue);
    };
    // 初始化
    const view = ref(null);
    const initMyMap = () => {
        map.value = initMap({
            tilt: 73,
            heading: 0,
            // center: center,
            center: [117.58071978510877, 39.430080286360784],
            zoom: 9,
            style: darkStyle,
            tilt: 0,
        });
        view.value = new mapvgl.View({
            effects: [
                new mapvgl.BloomEffect({
                    //发光特效
                    threshold: 0.2,
                    blurSize: 4.0,
                    clarity: 0.8, // 注释本行，炫光特效
                }),
            ],
            map: map.value,
        });
        // 监测当前缩放等级
        // map.value.addEventListener('zoomend',function(e){
        //     console.log(e.target.zoomLevel)
        // })
        // 天津市立体图
        addWallLayer("120000", map.value);
        // 天津市平面图层 暂时不用
        // addCityLineLayer(map.value)
        // 各区平面图层
        addFillLayer(map.value);
    };

    // 城市轮廓查询, 立体图层
    const regions = ref([]);
    var wallLayer = null;
    const addWallLayer = (adcode) => {
        GETNOBASE("bmapGL/search/v1/boundary", {
            // q: '天津市',
            adcode,
            outputCrs: "gcj02ll",
            ApiAuthorization: "USER_AK",
        }).then((res) => {
            regions.value = res.result;
            const boundaries = res.result.filter((v) => v.adcode == adcode)[0]
                .boundaries;
            const item = boundaries.map((v) => v.split(";"));
            const _data = item.map((v, i) => {
                return v.map((item) => item.split(","));
            });
            const data = [
                {
                    geometry: {
                        type: "LineString",
                        coordinates: _data[0],
                    },
                },
            ];
            // 添加遮罩层
            addMaskLayer([
                {
                    geometry: {
                        type: "Polygon",
                        coordinates: [_data[0]],
                    },
                },
            ]);
            wallLayer = new mapvgl.LineLayer({
                gradient: {
                    0: "#04517d",
                    1: "#00bfb5",
                },
                repeat: true,
                renderOrder: 1,
                color: "rgba(57, 254, 247, 0.8)",
                height: 20000,
            });
            wallLayer.setData(data);
            view.value.addLayer(wallLayer);
        });
    };
    // 添加mapGL遮罩层
    const addMaskLayer = (data, layerName) => {
        // 遮罩层
        layerName = new mapvgl.MaskLayer({
            color: "rgba(11, 23, 42, 0.8)",
            data,
        });
        view.value.addLayer(layerName);
    };
    // 每个行政区轮廓绘制
    var fillLayer = null;
    const fillData = ref(null);
    const addFillLayer = (map) => {
        if (!fillLayer) {
            GETNOBASE("/map-geojson/120000.json", {}).then((res) => {
                fillData.value = res;
                fillLayer = new BMapGL.FillLayer({
                    minZoom: 10,
                    maxZoom: 12,
                    crs: "GCJ02",
                    enablePicked: true,
                    autoSelect: true,
                    pickWidth: 30,
                    pickHeight: 30,
                    selectedIndex: 1,
                    borderMasker: true,
                    selectedColor: "#04517d", // 悬浮选中项颜色
                    border: true,
                    borderWeight: 10,
                    style: {
                        fillOpacity: 0.3,
                        strokeWeight: 1,
                        strokeColor: "#01aaff",
                    },
                });

                // fillLayer.addEventListener("click", function (e) {
                //     if (e.value.dataIndex !== -1 && e.value.dataItem) {
                //         // 单独绘制当前行政区
                //         const { adcode } = e.value.dataItem.properties;
                //         const data = {
                //             type: "FeatureCollection",
                //             features: res.features.filter(
                //                 (v) => v.properties.adcode == adcode
                //             ),
                //         };
                //         singleRegionLayer(data);
                //         // 绘制下一级站点TODO
                //     }
                // });
                fillLayer.onShow = function (e) {
                    console.log("显示各区轮廓");
                    // 各区轮廓显示后隐藏最外层城市立体图层
                    hideLayer(wallLayer);
                };
                fillLayer.onHide = function (e) {
                    console.log("隐藏各区轮廓");
                    // 各区轮廓隐藏后显示最外层城市立体图层
                    showLayer(wallLayer);
                };
                map.addNormalLayer(fillLayer);
                fillLayer.setData(res);
            });
            return;
        }
        // 已经存在图层，先删除再添加
        // removeOneLayer(map, fillLayer.value)
        // map.addNormalLayer(fillLayer.value);
        // fillLayer.value.setData(fillData.value);
    };

    // 某个行政区轮廓
    var singleLayer = null;
    const singleRegionLayer = (data) => {
        if (singleLayer) {
            removeOneLayer(map.value, singleLayer);
        }
        const { center } = data.features[0].properties;
        // 添加遮罩层
        console.log(data.features);
        // addMaskLayer(data.features)
        //改变中心点、缩放比例
        let lng = center[0];
        let lat = center[1];
        var point = new BMapGL.Point(lng, lat);
        setCenterAndZoom(map.value, { centerPoint: point, zoomValue: 13 });
        singleLayer = new BMapGL.FillLayer({
            minZoom: 12,
            maxZoom: 14,
            crs: "GCJ02",
            enablePicked: false,
            autoSelect: false,
            pickWidth: 30,
            pickHeight: 30,
            selectedIndex: 1,
            borderMasker: true,
            selectedColor: "#04517d", // 悬浮选中项颜色
            border: true,
            borderWeight: 10,
            style: {
                fillOpacity: 0.3,
                strokeWeight: 1,
                strokeColor: "#01aaff",
            },
        });
        singleLayer.onShow = function (e) {
            // 点击某行政区，隐藏最外层城市立体图层
            hideLayer(wallLayer);
            // 绘制WMS图层TODO
        };
        map.value.addNormalLayer(singleLayer);
        singleLayer.setData(data);
    };
    // 隐藏立体图层
    const hideLayer = (layer) => {
        view.value.hideLayer(layer);
    };
    // 显示立体图层
    const showLayer = (layer) => {
        view.value.showLayer(layer);
    };
    // 移除图层
    const removeOneLayer = (map, layer) => {
        map.removeNormalLayer(layer);
    };
    return {
        initMyMap,
        map,
        seenScale,
    };
});
